<template>
  <view class="content">
    <u-form>
      <view class="wrap">
        <view class="top">
          <view class="item">
            <view class="left">收货人</view>
            <input
              type="text"
              placeholder-class="line"
              placeholder="请填写收货人姓名"
              v-model="addressinfodata.consignee"
            />
          </view>
          <view class="item">
            <view class="left">手机号码</view>
            <input
              type="text"
              placeholder-class="line"
              placeholder="请填写收货人手机号"
              v-model="addressinfodata.mobile"
            />
          </view>
          <view class="item">
            <view class="left">所在地区</view>
            <pick-regions
              :defaultRegion="defaultRegionCode"
              @getRegion="handleGetRegion"
            >
              <input
                disabled
                type="text"
                placeholder-class="line"
                placeholder="省市区县、乡镇等"
                v-model="addressinfodata.region_text"
              />
            </pick-regions>
          </view>
          <view class="item address">
            <view class="left">详细地址</view>
            <textarea
              type="text"
              placeholder-class="line"
              placeholder="街道、楼牌等"
              v-model="addressinfodata.address"
              >{{ addressinfodata.address }}</textarea
            >
          </view>
          <!-- <view class="site-clipboard">
						<textarea placeholder-class="line" value="" placeholder="粘贴文本,可自动识别姓名和地址等" />
						<view class="clipboard">
							地址粘贴板
							<u-icon name="arrow-down" class="icon" :size="20"></u-icon>
						</view>
					</view> -->
        </view>
        <view class="bottom">
          <view class="tag">
            <view class="left">标签</view>
            <view class="right">
              <text
                class="tags"
                :class="{ 'red-border': currentTag === 'home' }"
                @click="changeTag('home')"
                >家</text
              >
              <text
                class="tags"
                :class="{ 'red-border': currentTag === 'business' }"
                @click="changeTag('business')"
                >公司</text
              >
              <text
                class="tags"
                :class="{ 'red-border': currentTag === 'school' }"
                @click="changeTag('school')"
                >学校</text
              >
              <text
                class="tags"
                :class="{ 'red-border': currentTag === 'sj' }"
                @click="changeTag('sj')"
                >默认</text
              >
            </view>
          </view>
          <view class="default">
            <view class="left">
              <view class="set">设置默认地址</view>
              <view class="tips">提醒：每次下单会默认推荐该地址</view>
            </view>
            <view class="right"
              ><switch color="#3c9cff" :checked="flag" @change="setDefault"
            /></view>
          </view>
        </view>
        <u-picker mode="region" ref="uPicker" v-model="show" />
      </view>
    </u-form>

    <view class="btn">
      <u-button
        type="primary"
        @click="AddDressEdit"
        shape="circle"
        text="提交修改"
      ></u-button>
    </view>
    <u-toast ref="notice"></u-toast>
  </view>
</template>

<script>
import pickRegions from "@/components/pick-regions/pick-regions.vue";

export default {
  comments: {
    pickRegions,
  },
  onLoad(option) {
    this.businessinfo = this.$u.business.check();
    console.log(this.businessinfo);
    this.id = option.id ? option.id : 0;

    this.info();
  },
  data() {
    return {
      currentTag: "", // 用于记录当前点击的标签
      id: 0,
      show: false,
      businessinfo: {},
      region: [],
      addressinfodata: {},
      defaultRegion: [],
      defaultRegionCode: "",
      flag: false,
    };
  },
  methods: {
    // 获取选择的地区
    handleGetRegion(region) {
      this.region = region;
    },
    setDefault() {},
    showRegionPicker() {
      this.show = true;
    },
    changeTag(tag) {
      // 更新当前点击的标签
      this.currentTag = tag;
      if (tag == "sj") {
        this.addressinfodata.tag = 0;
      } else if (tag == "home") {
        this.addressinfodata.tag = 1;
      } else if (tag == "business") {
        this.addressinfodata.tag = 2;
      } else {
        this.addressinfodata.tag = 3;
      }
    },
    setDefault(e) {
      if (e.detail.value == true) {
        this.flag = true;
        this.addressinfodata.status = 1;
      } else {
        this.flag = false;
        this.addressinfodata.status = 0;
      }
    },
    // 获取选择的地区
    handleGetRegion(region) {
      this.region = region;

      this.addressinfodata.region_text = this.region
        .map((item) => item.name)
        .join("-");

      this.addressinfodata.district = region[2].code;
    },
    // 修改地址
    async AddDressEdit() {
      let data = {
        busid: this.businessinfo.id,
        id: this.id,
        consignee: this.addressinfodata.consignee,
        mobile: this.addressinfodata.mobile,
        address: this.addressinfodata.address,
        district: this.addressinfodata.district,
        tag: this.addressinfodata.tag,
        status: this.addressinfodata.status,
      };

      if (data.mobile == "") {
        this.$refs.notice.show({
          type: "error",
          message: "手机号不能为空",
          duration: 1200,
        });

        return false;
      } else {
        if (!this.$u.test.mobile(data.mobile)) {
          this.$refs.notice.show({
            type: "error",
            message: "手机号格式有误",
            duration: 1200,
          });

          return false;
        }
      }

      let result = await this.$u.api.user.addressEdit(data);

      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 1200,
          complete: () => {
            uni.$u.route({
              type:"redirectTo",
              url:"pagesB/address/index"
            })

          },
        });
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
          duration: 1200,
          complete: () => {},
        });
      }
    },
    async info() {
      let data = {
        busid: this.businessinfo.id,
        addressid: this.id,
      };

      let result = await this.$u.api.user.addressInfo(data);

      this.addressinfodata = result.data;

      if (this.addressinfodata.status == 0) {
        this.flag = false;
      } else {
        this.flag = true;
      }

      this.defaultRegionCode = result.data.district;
      if (this.addressinfodata.tag == 0) {
        this.currentTag = "sj";
      } else if (this.addressinfodata.tag == 1) {
        this.currentTag = "home";
      } else if (this.addressinfodata.tag == 2) {
        this.currentTag = "business";
      } else {
        this.currentTag = "school";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  width: 70%;
  margin: 50px auto;
}
.line {
  color: $u-light-color;
  font-size: 26rpx;
}

.wrap {
  background-color: #f2f2f2;

  .top {
    background-color: #ffffff;
    border-top: solid 2rpx $u-border-color;
    padding: 22rpx;

    .item {
      display: flex;
      font-size: 28rpx;
      line-height: 100rpx;
      align-items: center;
      border-bottom: solid 2rpx $u-border-color;

      .left {
        width: 180rpx;
      }

      input {
        text-align: left;
      }
    }

    .address {
      padding: 20rpx 0;

      textarea {
        // width: 100%;
        height: 150rpx;
        background-color: #f7f7f7;
        line-height: 60rpx;
        margin: 40rpx auto;
        color: #333131;
        padding: 20rpx;
      }
    }

    .site-clipboard {
      padding-right: 40rpx;

      .clipboard {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        color: $u-tips-color;
        height: 80rpx;

        .icon {
          margin-top: 6rpx;
          margin-left: 10rpx;
        }
      }
    }
  }

  .bottom {
    margin-top: 20rpx;
    padding: 40rpx;
    padding-right: 0;
    background-color: #ffffff;
    font-size: 26rpx;

    .tag {
      display: flex;

      .left {
        width: 160rpx;
      }

      .right {
        display: flex;
        flex-wrap: wrap;

        .tags {
          width: 140rpx;
          padding: 16rpx 8rpx;
          border: solid 2rpx $u-border-color;
          text-align: center;
          border-radius: 50rpx;
          margin: 0 10rpx 20rpx;
          display: flex;
          font-size: 24rpx;
          align-items: center;
          justify-content: center;
          color: $u-content-color;
          line-height: 1;
        }

        .plus {
          //padding: 10rpx 0;
        }
      }
    }

    .default {
      margin-top: 50rpx;
      display: flex;
      justify-content: space-between;
      border-bottom: solid 2rpx $u-border-color;
      line-height: 64rpx;

      .tips {
        font-size: 22rpx;
      }

      .right {
      }
    }
  }
}
/* 边框变红色的样式 */
.red-border {
  border-color: #3c9cff !important;
}
</style>
